<template>
	<div>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
		  <el-form-item label="资金申请名" prop="name">
		    <el-input v-model="ruleForm.name"></el-input>
		  </el-form-item>
<!--		  <el-form-item label="项目id" prop="projectName">-->
<!--		    <el-input v-model="ruleForm.projectName"></el-input>-->
<!--		  </el-form-item>-->
<!--		  <el-form-item label="学院id" prop="projectName">-->
<!--		    <el-input v-model="ruleForm.projectName"></el-input>-->
<!--		  </el-form-item>-->
		  <el-form-item label="申请金额" prop="money">
<!--		    <el-input v-model="ruleForm.money"></el-input>-->
        <el-input-number style="width: 100%" v-model="ruleForm.money" :precision="2" :step="100" ></el-input-number>
		  </el-form-item>
		  <el-form-item label="申请证明(图片)" prop="applyUrl">
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :before-upload="beforeUploads"
          :http-request="doPut"
        >
            <img v-if="ruleForm.applyUrl" :src="ruleForm.applyUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
		    <el-button @click="resetForm('ruleForm')">重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
</template>

<script>
  import Utils from "../assets/js/Utils";
	export default {
      name:"moneyApply",
	    data() {
	      return {
	        ruleForm: {
            name: "",
            money:"",
            applyUrl : ""
	        },
	        rules: {
	          name: [
	            { required: true, message: '资金申请名不能为空', trigger: 'blur' }
	          ],
	          money: [
	            { required: true, message: '申请金额不能为空', trigger: 'blur' }
	          ],
	          applyUrl: [
	            { required: true, message: '证明图片不能为空', trigger: 'blur' }
	          ]
	        }
	      };
	    },
	    methods: {
	      submitForm(formName) {
          if(this.ruleForm.name == "" || this.ruleForm.money == 0 || this.ruleForm.applyUrl == ""){
              alert("填写不完整！")
              return
          }

          let _this = this

          //console.log(Utils.GetQueryString("id"))

          this.$post({
              url : "expend/money/apply",
              data : {
                  name : this.ruleForm.name,
                  money: this.ruleForm.money,
                  applyUrl : this.ruleForm.applyUrl,
                  projectId : Utils.GetQueryString("project_id"),
                  collegeId : _this.$store.getters.getCollegeId
              }
          }).then(res =>{
              alert("添加成功！")

              this.$router.push({
                  path :  "project?project_id=" + Utils.GetQueryString("project_id")
              })
          }).catch(err =>{

          })
	      },
	      resetForm(formName) {
	        this.$refs[formName].resetFields();
	      },
        beforeUploads(file){
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        doPut(option){
          let file = option.file
          let OSS = require('ali-oss');
          this.$post({
              url : "sts/sign"
          }).then(res =>{
              let ossClient = new OSS({
                  region: 'oss-cn-qingdao',
                  accessKeyId: res.accessKeyId,
                  accessKeySecret: res.accessKeySecret,
                  stsToken: res.securityToken,
                  bucket: 'lius-1'
              })
              ossClient.put("imgs/" + (new Date()).getTime() + ".jpg", file).then(res =>{
                  this.ruleForm.applyUrl = res.url
              })
          }).catch(err => {
              console.log(err)
          })
        }
	    }
	  }
</script>

<style scoped>
  .avatar-uploader{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #409EFF;
    border-radius: 6px;
    cursor: pointer;
    position: absolute;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    border: 1px dashed #409EFF;
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
